<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	    <link rel="stylesheet" href="../../css/aui.css">
	    <link rel="stylesheet" href="../../css/refund.css">
	    <link rel="stylesheet" href="../../css/pulice.css">
		<style>
			.WD-shops{
				display: flex;
				font-size: 0.5rem;
			}
			.WD-nav{
				padding: 0.75rem 0.875rem;
			}
			.WD-shops p{
				font-size: 0.5rem;
				color: #333;
				line-height: 1.8;
			}
			.WD-shops .goodsImg + div p:last-child{
				color: #999;
			}
			.WD-shops img{
				width: 3.65rem;
			}
			.bdt10{
				border-top-width: .25rem;
			}
			.itemYy{
				font-size: 0.7rem;
				display: flex;
				justify-content: space-between;
				margin-bottom: 0.55rem;
			}
			.itemYy2{
				font-size: 0.6rem;
				color: #999;
			}
			.itemYyImg{
				display: inline-block;
				vertical-align: middle;
				width: .7rem;
				position: relative;
				top: -1px;
			}
			.itemYyInput{
				display: inline-block !important;
				height: auto !important;
				width: auto !important;
				font-size: .65rem !important;
			}
			.upImgStyle{
				width: 3.3rem;
				display: inline-block;
				margin-right: .25rem;
				vertical-align: text-top;
			}
			.tj{
				height: 1.8rem;
				line-height: 1.8rem
			}
			.upClick{
				width: 3.3rem;
				position: relative;
				overflow: hidden;
			}
			.upClick,.upImg{
				display: inline-block;
				vertical-align: text-top;
				line-height: 0;
			}
			.upImgInp{
				position: absolute;
				top: 0;
				left: 0;
				font-size: 1000%;
				opacity: 0;
			}
			.resiveYy{
				color: #999999;
			}
			.itLadel{
				display: block;
				padding: .5rem 0;
			}
			.itLadel img{
				width: .7rem;
				display: inline-block;
				vertical-align: middle;
				position: relative;
				top: -2px;
				margin-right: 6%;
			}
			.WD-shenti{
				margin-bottom: 5rem;
			}
			.layui-m-layerchild{border-radius: 4px !important;width: 80%}
			.tk1Tit{text-align: center;padding: 1.125rem 0;border-bottom: 1px solid #ccc;line-height: 1;font-size: .8rem}
			.tk1Cont{padding:0 0.775rem;text-align: left;line-height: 1;font-size: .65rem}
		</style>
		<script src="../../js/api.js"></script>
		<script src="../../js/libs/zepto.min.js"></script>
		<script src="../../js/layer.js"></script>
		<script>
			$(function () {
			    var str = '',site = 0;

                $('.hm-bar').load('../../data/headerOther.html',function (data) {
                    $(this).find('.head-main').text('申请退款');
                    $(this).find('.hm-bar-box').css('position','static');
                    $(this).find('.head-left').on('tap',function () {
                        window.history.back();
                    })
                });
                $('.resiveYy').on('tap', function () {
					layer.open({
                        type: 1,
                        content: 'as',
                        success: function (index, layero) {
                            $('.layui-m-layercont').html(
                                '<div id="tk1">\n' +
						'            <div class="tk1Tit">退款原因</div>\n' +
						'            <div class="tk1Cont">\n' +
						'                <label class="itLadel"><img src="../../img/radioIcon.png" alt="" />图片、产地、保质期等描述不符</label>\n' +
						'                <label class="itLadel"><img src="../../img/radioIcon2@2x.png" alt="" />认为是假货</label>\n' +
						'                <label class="itLadel"><img src="../../img/radioIcon2@2x.png" alt="" />生成日期、批号与商家承诺不符</label>\n' +
						'                <label class="itLadel"><img src="../../img/radioIcon2@2x.png" alt="" />发货问题</label>\n' +
						'                <label class="itLadel"><img src="../../img/radioIcon2@2x.png" alt="" />效果不好\不喜欢</label>\n' +
						'                <label class="itLadel"><img src="../../img/radioIcon2@2x.png" alt="" />认为是三无产品</label>\n' +
						'                <label class="itLadel"><img src="../../img/radioIcon2@2x.png" alt="" />其他</label>\n' +
						'            </div>\n' +
                                '</div>'
                            );

                            $('.tk1Cont').find('img').attr('src','../../img/radioIcon2@2x.png');
                            $('.tk1Cont').find('.itLadel').eq(site).find('img').attr('src','../../img/radioIcon.png');

                            $('.itLadel').on('tap',function () {
                                str = $(this).text();
                                $(this).addClass('active');
                                $.each($('.tk1Cont').find('.itLadel'),function (i) {
                                    if ($('.tk1Cont').find('.itLadel').eq(i).is('.active')) {
                                        site = i;
                                    }
                                });
                                $('.itemYy2').text(str);
								layer.closeAll();
                            });
                        }
					})
                });
                $('.upImgInp').on('change',function () {
					var obj = $('.upImgInp').get(0);
					var result = new FileReader();
					result.readAsDataURL(obj.files[0]);
					result.onload = function () {
                        var _length = $('.upImg').find('img').length;
                        console.log(_length);
                        if (_length <= 2) {
                            $('.upImg').append('<img class="upImgStyle" src="'+this.result+'" alt="" />');
                            if (_length == 2) {
                                $('.upClick').hide();
                                return;
                            }
                            $('.upClick').show();
                        }
                    }
                })
            })
		</script>
		<title>申请退款</title>
	</head>
	<body>
		<div class="hm-bar"></div>
		<div id="box">
			
			<div class="WD-shenti">
				<div class="WD-nav">
					<div class="WD-shops">
						<div class="goodsImg">
							<img src="../../img/goods.png" />
						</div>
						<div>
							<p>西门子(ximenzi)bicentennial地变电脑付款了呢开了</p>
							<p>颜色分类:<span>白色</span></p>
						</div>
					</div>
				</div>
				<div class="WD-nav bdt10">
					<div class="itemYy"><span>退款原因</span><span class="resiveYy">请选择<img class="itemYyImg" src="../../img/goIcon.png"/></span></div>
					<div class="itemYy2">图片、产地、保质期等描述不符</div>
				</div>
				<div class="WD-nav bdt10">
					<div class="itemYy" style="margin-bottom:0;display: block;">退款金额：<span style="color: #f00b22">&yen;699.00</span></div>
				</div>
				<div class="WD-nav bdt10">
					<div class="itemYy" style="margin-bottom:0;display: block;">退款说明：<input class="itemYyInput" type="text" placeholder="选填"></div>
				</div>
				<div class="WD-nav bdt10">
					<div class="itemYy">上传凭证</div>
					<div class="upBtnBox">
						<div class="upImg">

						</div>
						<div class="upClick">
							<img class="upImgStyle upBtn" src="../../img/upLoadImg.png" alt=""/>
							<input class="upImgInp" type="file" name="upInput" accept="image/*">
						</div>
					</div>
				</div>
			</div>
			<div class="tj">
				提交
			</div>
		</div>	
		
	</body>
</html>
